<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head th:replace="common/header::common_head"></head>
<title>销售表单</title>
<link rel="stylesheet" href="../../bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<link href="https://unpkg.com/bootstrap-table@1.15.2/dist/bootstrap-table.min.css" rel="stylesheet">
<link href="https://unpkg.com/bootstrap-table@1.15.2/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.css" rel="stylesheet">
<link href="../../dist/css/datePicker.css" rel="stylesheet">
<style>
    table, td, th
    {
        border:1px ;
        text-align: center;
    }
    th
    {
        font-size:1.1em;
    }
    td
    {
        height:50px;
    }
    .calendar-item {
        position: absolute;
        cols: 4;
        rows: 1;
        height: 27px;
        padding-left: 10px;
        border: 1px solid #ccc;
        border-radius: 2px;
    }
</style>
<body class="hold-transition skin-blue sidebar-mini">
<div th:replace="common/LeftCommon::common_top_left"></div>
<div class="wrapper">
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                销售表单
                <small>SellForm</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="/index"><i class="fa fa-dashboard"></i> 首页</a></li>
                <li><a href="#">表单</a></li>
                <li class="active">采购表单</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#fa-icons" data-toggle="tab">销售明细</a></li>
                            <li><a href="#glyphicons" data-toggle="tab">按单品汇总</a></li>
                            <li><a href="#user-deploy" data-toggle="tab">按商品汇总</a></li>
                            <li><a href="#bills" data-toggle="tab">按单据汇总</a></li>
                            <li><a href="#custom" data-toggle="tab">按客户汇总</a></li>
                            <li><a href="#shopper" data-toggle="tab">按销售员汇总</a></li>
                            <li><a href="#shopper_shop" data-toggle="tab">按销售员所属门店汇总</a></li>
                            <li><a href="#stock_shop" data-toggle="tab">按仓库所属门店汇总</a></li>
                        </ul>
                        <div class="tab-content">
                            <!-- Font Awesome Icons -->
                            <div class="tab-pane active" id="fa-icons">
                                <ul class="list-inline sel-a" style="padding-left: 20px">
                                    <li class="text-sel"><a  href="javascript:void(0)" onclick="javascript:today()" style="font-size:1.3em"> 今日</a></li>
                                    <li><a href="javascript:void(0)" onclick="javascript:yesterday()" style="font-size:1.3em"> 昨日</a></li>
                                    <li><a href="javascript:void(0)" onclick="javascript:seven()" style="font-size:1.3em"> 近七天</a></li>
                                    <li><a href="javascript:void(0)" onclick="javascript:thirty()" style="font-size:1.3em"> 近30天</a></li>
                                    <li><a id="other" href="javascript:void(0)" onclick="javascript:other()" style="font-size:1.3em"> 其他</a></li>
                                    <div id="display" style="display:none">
                                        <div class="input-group">
                                            <div class="input-group-addon">
                                                <i class="fa fa-calendar"></i>
                                            </div>
                                            <textarea   class="calendar-item"  id="start"></textarea><p style="position: absolute;margin-left:161px;font-size: 1.2em">至</p>
                                            <textarea  style="margin-left:185px;" class="calendar-item" id="end"></textarea>
                                            <button onclick="hide()" id="hide" style="position: absolute;margin-left: 400px">收起</button>
                                            <button onclick="chose()" id="chose"style="position: absolute;margin-left: 340px" >查找</button>
                                        </div>
                                    </div>
                                    <li style="position:absolute;right: 50px;font-size:1.3em" >
                                        <button type="button" class="btn green" id="excell" onclick="method5('example1')">导出表格</button>
                                    </li>
                                </ul>
                                <div style="padding-left: 20px;">
                                    <div class="data-container" style="float: left;padding-left: 35px">
                                        <span class="title" style="font-size: 1.2em;">销售单品数：</span>&nbsp;&nbsp;
                                        <span style="font-size: 2em;color: red;" th:text="${sum}"></span>
                                    </div>
                                    <div class="data-container" style="float: left;padding-left: 150px">
                                        <span class="title" style="font-size: 1.2em;">销售额：</span>&nbsp;&nbsp;
                                        <span style="font-size: 2em;color: red;" th:text="￥+${amount}"></span>
                                    </div>
                                    <div class="data-container last-container" style="float: left;padding-left: 150px">
                                        <span class="title" style="font-size: 1.2em;">销售毛利：</span>&nbsp;&nbsp;
                                        <span style="font-size: 2em;color: red;" th:text="￥+${amount}"></span>
                                    </div>
                                    <div class="data-container last-container" style="float: left;padding-left: 150px">
                                        <span class="title" style="font-size: 1.2em;">销售毛利率(%)：</span>&nbsp;&nbsp;
                                        <span style="font-size: 2em;color: red;" th:text="${amount} / ${amount} *100"></span>
                                    </div>
                                </div>
                                <section class="content" style="margin-top: 70px">
                                    <table id="example1" style="float: left;overflow: auto; width: 2000px; "data-show-columns="true">
                                        <thead>
                                        <tr>
                                            <th style="text-align: center;">商品名称</th>
                                            <th style="text-align: center;">货号</th>
                                            <th style="text-align: center;">条码</th>
                                            <th style="text-align: center;">颜色</th>
                                            <th style="text-align: center;">尺码</th>
                                            <th style="text-align: center;">品牌</th>
                                            <th style="text-align: center;">分类</th>
                                            <th style="text-align: center;">单位</th>
                                            <th style="text-align: center;">单品数量</th>
                                            <th style="text-align: center;">单价</th>
                                            <th style="text-align: center;">折扣%</th>
                                            <th style="text-align: center;">折后价</th>
                                            <th style="text-align: center;">金额</th>
                                            <th style="text-align: center;">折后金额</th>
                                            <th style="text-align: center;">单据编号</th>
                                            <th style="text-align: center;">业务类别</th>
                                            <th style="text-align: center;">采购员</th>
                                            <th style="text-align: center;">供应商</th>
                                            <th style="text-align: center;">仓库</th>
                                            <th style="text-align: center;">款式</th>
                                            <th style="text-align: center;">材质</th>
                                            <th style="text-align: center;">季节</th>
                                            <th style="text-align: center;">年份</th>
                                            <th style="text-align: center;">结算账户</th>
                                            <th style="text-align: center;">单据日期</th>
                                            <th style="text-align: center;">备注</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr th:each="goods, goodsStat: ${goods}">
                                            <td th:text="${goods.name}"></td>
                                            <td th:text="${goods.goodsNumber}"></td>
                                            <td th:text="${goods.barCode}"></td>
                                            <td th:text="${goods.color}"></td>
                                            <td th:text="${goods.size}"></td>
                                            <td th:text="${goods.brand}"></td>
                                            <td th:text="${goods.classify}"></td>
                                            <td th:text="${goods.unit}"></td>
                                            <td th:text="${goods.unitNumber}"></td>
                                            <td th:text="${goods.unitPrice}"></td>
                                            <td th:text="${goods.discount}*100"></td>
                                            <td th:text="${goods.unitPrice} * ${goods.discount} "></td>
                                            <td th:text="${goods.unitPrice} * ${goods.unitNumber}"></td>
                                            <td th:text="${goods.unitPrice} * ${goods.discount} * ${goods.unitNumber}"></td>
                                            <td th:text="${goods.billNumber}"></td>
                                            <td th:text="${goods.businessCategory}"></td>
                                            <td th:text="${goods.purchaser}"></td>
                                            <td th:text="${goods.supplier}"></td>
                                            <td th:text="${goods.stock}"></td>
                                            <td th:text="${goods.style}"></td>
                                            <td th:text="${goods.material}"></td>
                                            <td th:text="${goods.season}"></td>
                                            <td th:text="${goods.year}"></td>
                                            <td th:text="${goods.settlementAccount}"></td>
                                            <td th:text="${#dates.format(goods.createTime, 'yyyy-MM-dd  HH:mm:ss')}"></td>
                                            <td th:text="${goods.remark}"></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </section>
                            </div>
                            <div class="tab-pane" id="glyphicons">
                                <ul class="list-inline sel-a" style="padding-left: 20px">
                                    <li class="text-sel"><a  href="javascript:void(0)" onclick="javascript:today()" style="font-size:1.3em"> 今日</a></li>
                                    <li><a href="javascript:void(0)" onclick="javascript:yesterday()" style="font-size:1.3em"> 昨日</a></li>
                                    <li><a href="javascript:void(0)" onclick="javascript:seven()" style="font-size:1.3em"> 近七天</a></li>
                                    <li><a href="javascript:void(0)" onclick="javascript:thirty()" style="font-size:1.3em"> 近30天</a></li>
                                    <li><a href="javascript:void(0)" onclick="javascript:other()" style="font-size:1.3em"> 其他</a></li>
                                    <li style="position:absolute;right: 50px;font-size:1.3em" ><button type="button" class="btn green" id="excell" onclick="method5('example2')">导出表格</button></li>
                                </ul>
                                <div style="padding-left: 20px;">
                                    <div class="data-container" style="float: left;padding-left: 35px">
                                        <span class="title" style="font-size: 1.2em;">采购单品数：</span>&nbsp;&nbsp;
                                        <span style="font-size: 2em;color: red;" th:text="${sum}"></span>
                                    </div>
                                    <div class="data-container" style="float: left;padding-left: 150px">
                                        <span class="title" style="font-size: 1.2em;">采购笔数：</span>&nbsp;&nbsp;
                                        <span style="font-size: 2em;color: red;">1</span>
                                    </div>
                                    <div class="data-container last-container" style="float: left;padding-left: 150px">
                                        <span class="title" style="font-size: 1.2em;">采购金额：</span>&nbsp;&nbsp;
                                        <span style="font-size: 2em;color: red;" th:text="￥+${amount}"></span>
                                    </div>
                                </div>
                                <section class="content" style="margin-top: 70px">
                                    <table id="example2" style="float: left;overflow: auto; width: 2000px; "data-show-columns="true">
                                        <thead>
                                        <tr>
                                            <th style="text-align: center;">商品名称</th>
                                            <th style="text-align: center;">货号</th>
                                            <th style="text-align: center;">条码</th>
                                            <th style="text-align: center;">颜色</th>
                                            <th style="text-align: center;">尺码</th>
                                            <th style="text-align: center;">品牌</th>
                                            <th style="text-align: center;">分类</th>
                                            <th style="text-align: center;">单位</th>
                                            <th style="text-align: center;">单品数量</th>
                                            <th style="text-align: center;">单价</th>
                                            <th style="text-align: center;">折扣%</th>
                                            <th style="text-align: center;">折后价</th>
                                            <th style="text-align: center;">金额</th>
                                            <th style="text-align: center;">折后金额</th>
                                            <th style="text-align: center;">单据编号</th>
                                            <th style="text-align: center;">业务类别</th>
                                            <th style="text-align: center;">采购员</th>
                                            <th style="text-align: center;">供应商</th>
                                            <th style="text-align: center;">仓库</th>
                                            <th style="text-align: center;">款式</th>
                                            <th style="text-align: center;">材质</th>
                                            <th style="text-align: center;">季节</th>
                                            <th style="text-align: center;">年份</th>
                                            <th style="text-align: center;">结算账户</th>
                                            <th style="text-align: center;">单据日期</th>
                                            <th style="text-align: center;">备注</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr th:each="goods, goodsStat: ${goods}">
                                            <td th:text="${goods.name}"></td>
                                            <td th:text="${goods.goodsNumber}"></td>
                                            <td th:text="${goods.barCode}"></td>
                                            <td th:text="${goods.color}"></td>
                                            <td th:text="${goods.size}"></td>
                                            <td th:text="${goods.brand}"></td>
                                            <td th:text="${goods.classify}"></td>
                                            <td th:text="${goods.unit}"></td>
                                            <td th:text="${goods.unitNumber}"></td>
                                            <td th:text="${goods.unitPrice}"></td>
                                            <td th:text="${goods.discount}*100"></td>
                                            <td th:text="${goods.unitPrice} * ${goods.discount} "></td>
                                            <td th:text="${goods.unitPrice} * ${goods.unitNumber}"></td>
                                            <td th:text="${goods.unitPrice} * ${goods.discount} * ${goods.unitNumber} "></td>
                                            <td th:text="${goods.billNumber}"></td>
                                            <td th:text="${goods.businessCategory}"></td>
                                            <td th:text="${goods.purchaser}"></td>
                                            <td th:text="${goods.supplier}"></td>
                                            <td th:text="${goods.stock}"></td>
                                            <td th:text="${goods.style}"></td>
                                            <td th:text="${goods.material}"></td>
                                            <td th:text="${goods.season}"></td>
                                            <td th:text="${goods.year}"></td>
                                            <td th:text="${goods.settlementAccount}"></td>
                                            <td th:text="${#dates.format(goods.createTime, 'yyyy-MM-dd  HH:mm:ss')}"></td>
                                            <td th:text="${goods.remark}"></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </section>
                            </div>
                            <div class="tab-pane" id="user-deploy">
                                <ul class="list-inline sel-a" style="padding-left: 20px">
                                    <li class="text-sel"><a  href="javascript:void(0)" onclick="javascript:today()" style="font-size:1.3em"> 今日</a></li>
                                    <li><a href="javascript:void(0)" onclick="javascript:yesterday()" style="font-size:1.3em"> 昨日</a></li>
                                    <li><a href="javascript:void(0)" onclick="javascript:seven()" style="font-size:1.3em"> 近七天</a></li>
                                    <li><a href="javascript:void(0)" onclick="javascript:thirty()" style="font-size:1.3em"> 近30天</a></li>
                                    <li><a href="javascript:void(0)" onclick="javascript:other()" style="font-size:1.3em"> 其他</a></li>
                                    <li style="position:absolute;right: 50px;font-size:1.3em" ><button type="button" class="btn green" id="excell" onclick="method5('example3')">导出表格</button></li>
                                </ul>
                                <div style="padding-left: 20px;">
                                    <div class="data-container" style="float: left;padding-left: 35px">
                                        <span class="title" style="font-size: 1.2em;">采购单品数：</span>&nbsp;&nbsp;
                                        <span style="font-size: 2em;color: red;" th:text="${sum}"></span>
                                    </div>
                                    <div class="data-container" style="float: left;padding-left: 150px">
                                        <span class="title" style="font-size: 1.2em;">采购笔数：</span>&nbsp;&nbsp;
                                        <span style="font-size: 2em;color: red;">1</span>
                                    </div>
                                    <div class="data-container last-container" style="float: left;padding-left: 150px">
                                        <span class="title" style="font-size: 1.2em;">采购金额：</span>&nbsp;&nbsp;
                                        <span style="font-size: 2em;color: red;" th:text="￥+${amount}"></span>
                                    </div>
                                </div>
                                <section class="content" style="margin-top: 70px">
                                    <table id="example3" style="float: left;overflow: auto; width: 2000px; " data-show-columns="true">
                                        <thead>
                                        <tr>
                                            <th style="text-align: center;">商品名称</th>
                                            <th style="text-align: center;">货号</th>
                                            <th style="text-align: center;">条码</th>
                                            <th style="text-align: center;">品牌</th>
                                            <th style="text-align: center;">分类</th>
                                            <th style="text-align: center;">单位</th>
                                            <th style="text-align: center;">单品数量</th>
                                            <th style="text-align: center;">单价</th>
                                            <th style="text-align: center;">折扣%</th>
                                            <th style="text-align: center;">折后价</th>
                                            <th style="text-align: center;">金额</th>
                                            <th style="text-align: center;">折后金额</th>
                                            <th style="text-align: center;">款式</th>
                                            <th style="text-align: center;">材质</th>
                                            <th style="text-align: center;">季节</th>
                                            <th style="text-align: center;">年份</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr th:each="goods, goodsStat: ${good}">
                                            <td th:text="${goods.name}"></td>
                                            <td th:text="${goods.goodsNumber}"></td>
                                            <td th:text="${goods.barCode}"></td>
                                            <td th:text="${goods.brand}"></td>
                                            <td th:text="${goods.classify}"></td>
                                            <td th:text="${goods.unit}"></td>
                                            <td th:text="${goods.unitNumber}"></td>
                                            <td th:text="${goods.unitPrice}"></td>
                                            <td th:text="${goods.discount}*100"></td>
                                            <td th:text="${goods.unitPrice} * ${goods.discount} "></td>
                                            <td th:text="${goods.unitPrice} * ${goods.unitNumber}"></td>
                                            <td th:text="${goods.unitPrice} * ${goods.discount} * ${goods.unitNumber} "></td>
                                            <td th:text="${goods.style}"></td>
                                            <td th:text="${goods.material}"></td>
                                            <td th:text="${goods.season}"></td>
                                            <td th:text="${goods.year}"></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </section>
                            </div>
                            <div class="tab-pane" id="pay-deploy" style="margin-top: 50px"><div id="receiptParam">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">微信/支付宝收款默认账户</label>
                                    <div class="col-sm-5 validate_input" style="line-height: 21px;">
                                        <input  type="text" class="form-control" ng-model="company.comName" id="comName" name="comName" maxlength="30" placeholder="默认为支付宝" ng-readonly="isReadonly" required>
                                        <span class="text-muted label-defalut-price-type" style="display:block;line-height: 28px;font-size: 12px; margin-top: 14px;">
								<div style="display: inline;float:none" class="icon-help">
									<a href="https://www.qinsilk.com/mms/front/help/help-id881.html" target="_blank" style="cursor: pointer;font-size: 12px;">
									点击查看扫码收款说明!
									</a>
								</div>
								</span>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-4 control-label">微信/支付宝收款默认账目类型</label>
                                    <div class="col-sm-5 validate_input" style="line-height: 21px;">
                                        <input  type="text" class="form-control" ng-model="company.comName" name="comName" maxlength="30" placeholder="支付类型" ng-readonly="isReadonly" required>

                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">微信/支付宝收款二维码：</label>
                                    <div id="qrcodeReceipt" class="col-sm-5 validate_input" style="line-height: 21px;width:300px;">
                                        <div id="urlQrcode" style="display:none;"></div>
                                        <span ng-show="isAppOpen" class="text-muted label-defalut-price-type" style="display:block;line-height: 28px;font-size: 12px;color:red;width:300px;">
									右键点击图片另存打印可使用。<a href="#" >点我，关注公众号，即时接收收款信息</a>
								</span>
                                        <span ng-show="!isAppOpen" class="text-muted label-defalut-price-type" style="display:block;line-height: 28px;font-size: 12px;color:red;width:300px;">
									<a href="http://www.qinsilk.com/barpay.html" target="_blank">您当前尚未开通扫码支付功能，点击前往免费开通</a>
								</span>
                                    </div>
                                </div>
                            </div></div>
                            <div class="tab-pane" id="bills"></div>
                            <div class="tab-pane" id="supplier"></div>
                            <div class="tab-pane" id="purchaser"></div><!-- /.tab-content -->
                            <div class="tab-pane" id="purchaser_shop"></div>
                            <div class="tab-pane" id="stock_shop"></div>
                            <!-- /.nav-tabs-custom -->



                        </div>

                        <!-- /.content -->
                    </div>
                </div>

            </div></section>
    </div>
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Create the tabs -->
        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
            <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>

            <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
            <!-- Home tab content -->
            <div class="tab-pane" id="control-sidebar-home-tab">
                <h3 class="control-sidebar-heading">Recent Activity</h3>
                <ul class="control-sidebar-menu">
                    <li>
                        <a href="javascript:void(0)">
                            <i class="menu-icon fa fa-birthday-cake bg-red"></i>

                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>

                                <p>Will be 23 on April 24th</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <i class="menu-icon fa fa-user bg-yellow"></i>

                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>

                                <p>New phone +1(800)555-1234</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>

                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>

                                <p>nora@example.com</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <i class="menu-icon fa fa-file-code-o bg-green"></i>

                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>

                                <p>Execution time 5 seconds</p>
                            </div>
                        </a>
                    </li>
                </ul>
                <!-- /.control-sidebar-menu -->

                <h3 class="control-sidebar-heading">Tasks Progress</h3>
                <ul class="control-sidebar-menu">
                    <li>
                        <a href="javascript:void(0)">
                            <h4 class="control-sidebar-subheading">
                                Custom Template Design
                                <span class="label label-danger pull-right">70%</span>
                            </h4>

                            <div class="progress progress-xxs">
                                <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <h4 class="control-sidebar-subheading">
                                Update Resume
                                <span class="label label-success pull-right">95%</span>
                            </h4>

                            <div class="progress progress-xxs">
                                <div class="progress-bar progress-bar-success" style="width: 95%"></div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <h4 class="control-sidebar-subheading">
                                Laravel Integration
                                <span class="label label-warning pull-right">50%</span>
                            </h4>

                            <div class="progress progress-xxs">
                                <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <h4 class="control-sidebar-subheading">
                                Back End Framework
                                <span class="label label-primary pull-right">68%</span>
                            </h4>

                            <div class="progress progress-xxs">
                                <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
                            </div>
                        </a>
                    </li>
                </ul>
                <!-- /.control-sidebar-menu -->

            </div>
            <!-- /.tab-pane -->
            <!-- Stats tab content -->
            <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
            <!-- /.tab-pane -->
            <!-- Settings tab content -->
            <div class="tab-pane" id="control-sidebar-settings-tab">
                <form method="post">
                    <h3 class="control-sidebar-heading">General Settings</h3>

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            Report panel usage
                            <input type="checkbox" class="pull-right" checked>
                        </label>

                        <p>
                            Some information about this general settings option
                        </p>
                    </div>
                    <!-- /.form-group -->

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            Allow mail redirect
                            <input type="checkbox" class="pull-right" checked>
                        </label>

                        <p>
                            Other sets of options are available
                        </p>
                    </div>
                    <!-- /.form-group -->

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            Expose author name in posts
                            <input type="checkbox" class="pull-right" checked>
                        </label>

                        <p>
                            Allow the user to show his name in blog posts
                        </p>
                    </div>
                    <!-- /.form-group -->

                    <h3 class="control-sidebar-heading">Chat Settings</h3>

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            Show me as online
                            <input type="checkbox" class="pull-right" checked>
                        </label>
                    </div>
                    <!-- /.form-group -->

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            Turn off notifications
                            <input type="checkbox" class="pull-right">
                        </label>
                    </div>
                    <!-- /.form-group -->

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            Delete chat history
                            <a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
                        </label>
                    </div>
                    <!-- /.form-group -->
                </form>
            </div>
            <!-- /.tab-pane -->
        </div>
    </aside>
    <div class="control-sidebar-bg"></div>
    <footer th:replace="common/footer::common_footer"></footer>
</div>
<script src="../../bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="../../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Select2 -->
<script src="../../bower_components/select2/dist/js/select2.full.min.js"></script>
<!-- InputMask -->
<script src="../../plugins/input-mask/jquery.inputmask.js"></script>
<script src="../../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="../../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<!-- date-range-picker -->
<script src="../../bower_components/moment/min/moment.min.js"></script>
<script src="../../bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- bootstrap datepicker -->
<script src="../../bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<!-- bootstrap color picker -->
<script src="../../bower_components/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
<!-- bootstrap time picker -->
<script src="../../plugins/timepicker/bootstrap-timepicker.min.js"></script>
<!-- SlimScroll -->
<script src="../../bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- iCheck 1.0.1 -->
<script src="../../plugins/iCheck/icheck.min.js"></script>
<!-- FastClick -->
<script src="../../bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js"></script>
<!-- DataTables -->
<script src="../../bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="../../bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<!-- FastClick -->
<script src="../../bower_components/fastclick/lib/fastclick.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="../../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Page Script -->
<script src="https://unpkg.com/bootstrap-table@1.15.2/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.2/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.js"></script>
<script src="../../dist/js/datePicker.js"></script>
<!--指定时间-->
<script type="text/javascript">
    Calendar.create({
        classN: 'calendar-item',
        callBack: function(bindElem, dateObj) {
            bindElem.innerHTML = dateObj.year + '-' + dateObj.month + '-' + dateObj.date;
        }
    })
</script>
<script>
    $(function () {
        $('#example1').DataTable({
            'paging'      : true,
            'lengthChange': false,
            'searching'   : false,
            'ordering'    : true,
            'info'        : true,
            'autoWidth'   : false
        })
        $('#example2').DataTable({
            'paging'      : true,
            'lengthChange': false,
            'searching'   : false,
            'ordering'    : true,
            'info'        : true,
            'autoWidth'   : false
        })
        $('#example3').DataTable({
            'paging'      : true,
            'lengthChange': false,
            'searching'   : false,
            'ordering'    : true,
            'info'        : true,
            'autoWidth'   : false
        })
    })
    //通过时间查找
    function today() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var day1 = date.getDate()+1;
        var startTime = year+"-"+month+"-"+day;;
        var endTime = year+"-"+month+"-"+day1;
        window.location.href = "/forms/purchase?startTime=" + startTime +"&endTime="+endTime;

    }
    function yesterday() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate()-1;
        var day1 = date.getDate();
        var startTime = year+"-"+month+"-"+day;;
        var endTime = year+"-"+month+"-"+day1;
        window.location.href = "/forms/purchase?startTime=" + startTime +"&endTime="+endTime;

    }
    function seven() {
        //endTime
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate()+1;
        //startTime
        var date1 = new Date(date - 1000 * 60 * 60 * 24 * 7)
        var year1 = date1.getFullYear();
        var month1 = date1.getMonth() + 1;
        var day1 = date1.getDate();
        var startTime = year1+"-"+month1+"-"+day1;;
        var endTime = year+"-"+month+"-"+day;
        window.location.href = "/forms/purchase?startTime=" + startTime +"&endTime="+endTime;

    }
    function thirty() {
        //endTime
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate()+1;
        //startTime
        var date1 = new Date(date - 1000 * 60 * 60 * 24 * 30)
        var year1 = date1.getFullYear();
        var month1 = date1.getMonth() + 1;
        var day1 = date1.getDate();
        var startTime = year1+"-"+month1+"-"+day1;;
        var endTime = year+"-"+month+"-"+day;
        window.location.href = "/forms/purchase?startTime=" + startTime +"&endTime="+endTime;
    }
    function other() {
        document.getElementById("display").style.display = "block";
    }
    function hide(){
        document.getElementById("display").style.display='none';
    }
    function chose(){
        var startTime = $("#start").val();
        var endTime = $("#end").val();
        window.location.href = "/forms/purchase?startTime=" + startTime +"&endTime="+endTime;
    }
    //打印表格
    var idTmr;
    function getExplorer() {
        var explorer = window.navigator.userAgent;
        //ie
        if(explorer.indexOf("MSIE") >= 0) {
            return 'ie';
        }
        //firefox
        else if(explorer.indexOf("Firefox") >= 0) {
            return 'Firefox';
        }
        //Chrome
        else if(explorer.indexOf("Chrome") >= 0) {
            return 'Chrome';
        }
        //Opera
        else if(explorer.indexOf("Opera") >= 0) {
            return 'Opera';
        }
        //Safari
        else if(explorer.indexOf("Safari") >= 0) {
            return 'Safari';
        }
    }
    function method5(tableid) {
        if(getExplorer() == 'ie') {
            var curTbl = document.getElementById(tableid);
            var oXL = new ActiveXObject("Excel.Application");
            var oWB = oXL.Workbooks.Add();
            var xlsheet = oWB.Worksheets(1);
            var sel = document.body.createTextRange();
            sel.moveToElementText(curTbl);
            sel.select();
            sel.execCommand("Copy");
            xlsheet.Paste();
            oXL.Visible = true;

            try {
                var fname = oXL.Application.GetSaveAsFilename("Excel.xls",
                    "Excel Spreadsheets (*.xls), *.xls");
            } catch(e) {
                print("Nested catch caught " + e);
            } finally {
                oWB.SaveAs(fname);
                oWB.Close(savechanges = false);
                oXL.Quit();
                oXL = null;
                idTmr = window.setInterval("Cleanup();", 1);
            }

        } else {
            tableToExcel(tableid)
        }
    }
    function Cleanup() {
        window.clearInterval(idTmr);
        CollectGarbage();
    }
    var tableToExcel = (function() {
        var uri = 'data:application/vnd.ms-excel;base64,',
            template = '<html><head><meta charset="UTF-8"></head><body><table  border="1">{table}</table></body></html>',
            base64 = function(
                s) {
                return window.btoa(unescape(encodeURIComponent(s)))
            },
            format = function(s, c) {
                return s.replace(/{(\w+)}/g, function(m, p) {
                    return c[p];
                })
            }
        return function(table, name) {
            if(!table.nodeType)
                table = document.getElementById(table)
            var ctx = {
                worksheet: name || 'Worksheet',
                table: table.innerHTML
            }
            window.location.href = uri + base64(format(template, ctx))
        }
    })()
    //冻结列
    var $table = $('#example1')
    var $table1 = $('#example2')
    var $table2 = $('#example3')
    function buildTable($el) {

        var data = []

        $el.bootstrapTable('destroy').bootstrapTable({
            data: data,
            search: true,
            toolbar: '.toolbar',
            fixedColumns: true,
            fixedNumber: 4
        })
    }
    $(function() {
        buildTable($table)

        $('#fixedNumber').change(function () {
            buildTable($table)
        })

        buildTable($table1)

        $('#fixedNumber').change(function () {
            buildTable($table1)
        })

        buildTable($table2)

        $('#fixedNumber').change(function () {
            buildTable($table2)
        })
    })
</script>
</body>
</html>